<template>
  <el-form label-position="right" label-width="100px" :model="infoForm" :rules="infoFormRules" ref="infoForm">
    <el-form-item label="工号">
      <el-input  v-model="infoForm.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="姓名">
      <el-input  v-model="infoForm.name" disabled></el-input>
    </el-form-item>
    <el-form-item label="职称">
      <el-input  v-model="infoForm.job" disabled></el-input>
    </el-form-item>
    <el-form-item label="学院">
      <el-input  v-model="infoForm.college" disabled></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input  v-model="infoForm.phone" ></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input  v-model="infoForm.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="info" round @click.native="cancleEdit()">取消修改</el-button>
      <el-button type="primary" round @click.native="submitUpdate()">确认更新</el-button>
  </el-form-item>
  </el-form>
</template>

<script>
  import {updateTeacherById} from '../../axios/teacher'

  export default {
    name: 'TeacherInfo',
    props:['infoForm'],
    data(){
      const phoneValidator = (rule, val, cb) => {
        if (!val) return cb(new Error('请输入手机号'))
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if (!regMobile.test(val)) return cb(new Error('请输入合法手机号'))
        cb()
      }
      const emailValidator = (rule, val, cb) => {
        if (!val) return cb(new Error('请输入邮箱'))
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        if (!regEmail.test(val)) return cb(new Error('请输入合法邮箱'))
        cb()
      }
      return {
        infoFormRules: {
          phone: [ { validator: phoneValidator, trigger: 'blur'} ],
          email: [ { validator: emailValidator, trigger: 'blur'} ]
        }
      }
    },
    methods:{
      // 取消修改
      cancleEdit(){
        this.$router.go(0) // 暂时先刷新页面，之后应该用其他路由替代
      },
      // 确认修改
      submitUpdate(){
        console.log(this.infoForm)
        updateTeacherById(this.infoForm).then(res => {
          if(res.success){
            this.$message.success('更新成功')
            this.$router.go(0) // 暂时先刷新页面，之后应该用其他路由替代
          } 
        }) 
        // 无后端，默认成功更新
        // this.$message.success('更新成功') 
      }
    },
  }
</script>

<style scoped> 
  .el-form-item .el-input {
    width:70%
  }
</style>

